<script lang="ts" setup>
import type { FormInstance } from 'element-plus';

import { ref, watch } from 'vue';

import { Page } from '@vben/common-ui';

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';

const formRef = ref<FormInstance>();

const formData = ref({
  // 交易对，字符串类型
  symbol: '',
  // 交易所，字符串类型，需从下拉选项中选择
  exchange: '',
  // 杠杆倍数，整数且大于 0
  leverage: 1,
  // 买卖方向，字符串类型，只能选择 'BUY' 或 'SELL'
  side: 'BUY',
  // 每个账户的总资金，浮点数类型
  total_amount: 0,
  // 防守资金比例，浮点数，范围在 0.0 到 1.0 之间
  guard_amount_ratio: 0,
  // 单位订单金额，浮点数且大于 10
  unit_order_amount: 11,
  // 阶梯增量，整数且大于等于 0
  layer_increment: 0,
  // 价格上限，浮点数类型
  price_up_limit: 0,
  // 价格下限，浮点数类型
  price_down_limit: 0,
  // 反攻价格比例，浮点数，范围在 0.0 到 1.0 之间
  counter_attack_ratio: 0,
  // 反攻等待时间秒数，整数类型
  counter_attack_time_seconds: 0,
  // 反攻每次下单的资金，浮点数类型
  counter_attack_amount_once: 0,
  // 阶梯数量，整数类型
  guard_levels: 0,
  // 水上比例，浮点数，范围在 0.0 到 1.0 之间
  tip_ratio: 0,
  // 是否清除挂单，布尔类型
  isClearOrders: false,
  // 冰山组，数组类型，与冰山户输入框互斥
  icebergGroups: [],
  // 冰山户，数组类型，与冰山组输入框互斥
  icebergAccounts: [],
});

const labelPosition = ref('left');
// 监听断点，判断是否移动端
const breakpoints = useBreakpoints(breakpointsTailwind);
const isMobile = breakpoints.smaller('md');
watch(
  () => isMobile.value,
  (val) => {
    labelPosition.value = val ? 'top' : 'left';
  },
  { immediate: true },
);

const submitForm = () => {
  // console.log('submit!', formData.value);
};
</script>

<template>
  <Page>
    <el-card class="">
      <el-form
        class="iceberg-form"
        :inline="true"
        :model="formData"
        ref="formRef"
        label-width="140px"
        :label-position="labelPosition"
      >
        <!-- 第一行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="交易对">
              <el-input v-model="formData.symbol" placeholder="请输入交易对" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="交易所">
              <el-select v-model="formData.exchange" placeholder="请选择交易所">
                <el-option label="交易所1" value="exchange1" />
                <el-option label="交易所2" value="exchange2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="杠杆倍数">
              <el-input-number
                :controls="false"
                v-model="formData.leverage"
                :min="1"
                step-strictly
                :step="1"
                placeholder="请输入杠杆倍数"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="买卖方向">
              <el-select v-model="formData.side" placeholder="请选择买卖方向">
                <el-option label="买入" value="BUY" />
                <el-option label="卖出" value="SELL" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="每个账户的总资金">
              <el-input-number
                :controls="false"
                v-model="formData.total_amount"
                placeholder="请输入总资金"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="防守资金比例">
              <el-input-number
                :controls="false"
                v-model="formData.guard_amount_ratio"
                :min="0.0"
                :max="1.0"
                :step="0.01"
                step-strictly
                placeholder="请输入防守资金比例"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第四行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="单位订单金额">
              <el-input-number
                :controls="false"
                v-model="formData.unit_order_amount"
                :min="10.0"
                placeholder="请输入单位订单金额"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="阶梯增量">
              <el-input-number
                :controls="false"
                v-model="formData.layer_increment"
                :min="0"
                step-strictly
                :step="1"
                placeholder="请输入阶梯增量"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第五行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="价格上限">
              <el-input-number
                :controls="false"
                v-model="formData.price_up_limit"
                placeholder="请输入价格上限"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="价格下限">
              <el-input-number
                :controls="false"
                v-model="formData.price_down_limit"
                placeholder="请输入价格下限"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第六行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="反攻价格比例">
              <el-input-number
                :controls="false"
                v-model="formData.counter_attack_ratio"
                :min="0.0"
                :max="1.0"
                :step="0.01"
                step-strictly
                placeholder="请输入反攻价格比例"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="反攻等待时间秒数">
              <el-input-number
                :controls="false"
                v-model="formData.counter_attack_time_seconds"
                placeholder="请输入反攻等待时间秒数"
                :min="0"
                step-strictly
                :step="1"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第七行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="反攻每次下单的资金">
              <el-input-number
                :controls="false"
                v-model="formData.counter_attack_amount_once"
                placeholder="请输入反攻每次下单的资金"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="阶梯数量">
              <el-input-number
                :controls="false"
                v-model="formData.guard_levels"
                placeholder="请输入阶梯数量"
                :min="0"
                step-strictly
                :step="1"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第八行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="水上比例">
              <el-input-number
                :controls="false"
                v-model="formData.tip_ratio"
                :min="0.0"
                :max="1.0"
                step-strictly
                :step="0.01"
                placeholder="请输入水上比例"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="是否清除挂单">
              <el-switch v-model="formData.isClearOrders" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第九行 -->
        <el-row>
          <el-col :xs="24" :sm="12">
            <el-form-item label="冰山组">
              <el-select
                v-model="formData.icebergGroups"
                placeholder="冰山组"
                :disabled="formData.icebergAccounts.length > 0"
              >
                <el-option label="组1" value="1" />
                <el-option label="组2" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="冰山户">
              <el-select
                v-model="formData.icebergAccounts"
                placeholder="冰山户"
                :disabled="formData.icebergGroups.length > 0"
              >
                <el-option label="户1" value="1" />
                <el-option label="户2" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="mt-10 flex justify-end">
        <el-button style="width: 220px" @click="submitForm()">
          终止挂单
        </el-button>
        <el-button style="width: 220px" type="primary" @click="submitForm()">
          开始挂单
        </el-button>
      </div>
    </el-card>
  </Page>
</template>

<style scoped lang="scss">
.iceberg-form {
  --iceberg-from-width: 220px;

  .el-input {
    --el-input-width: var(--iceberg-from-width);

    color: red;
  }

  .el-select {
    --el-select-width: var(--iceberg-from-width);
  }

  .el-input-number {
    width: var(--iceberg-from-width);
  }

  .el-switch {
    width: var(--iceberg-from-width);
  }
}
</style>
